<template>
  <Modal
    :active="sweepModalActive"
    transfer
    title="扫掠"
    draggable
    hide-mask
    :width="500"
    :no-footer="true"
    @close="closeBtn"
  >
    <div>
      <div>
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">选择器</div>
        </div>
        <div class="chose-box">
          <RadioGroup vertical>
            <Radio v-for="item in itemsList" :key="item" :label="item">
              <div class="radio_box">
                <div class="radio_item">{{ item }}</div>
                <div class="selector-buttons">
                  <button class="selector-button active">单元</button>
                  <button class="selector-button icon-button">
                    <img
                      src="../../assets/delete.svg"
                      alt=""
                      class="icon imgStyle"
                    />
                  </button>
                </div>
              </div>
            </Radio>
          </RadioGroup>
        </div>
        <div>
          <div class="selector-buttons2">
            <button class="selector-button active">扫掠路径</button>
            <button class="selector-button icon-button">
              <img src="../../assets/delete.svg" alt="" class="icon imgStyle" />
            </button>
          </div>
        </div>
      </div>
      <div>
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">选参数</div>
        </div>
        <div class="parameter_number">
          <div>份数：</div>
          <div class="parameter_numberinput">
            <NumberInput v-model:value="parameterNumber"></NumberInput>
          </div>
        </div>
        <div class="parameter_tangent">
          <Checkbox v-model:checked="checked"> 切向 </Checkbox>
        </div>
      </div>
      <div>
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">创建到：</div>
        </div>
        <div class="createTo-box">
          <div class="createTo-select">
            <Select :options="selectList" v-model:value="createTo"></Select>
          </div>

          <Button type="default" class="createTo-btn">当前组件</Button>
          <span class="createTo-text">unspecified</span>
        </div>
      </div>
      <div class="foot-box">
        <Button type="primary" size="small" @click="confirm">创建</Button>
        <Button type="default" size="small" @click="closeBtn">回退</Button>
      </div>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import {
  Modal,
  Button,
  Select,
  NumberInput,
  Checkbox,
  RadioGroup,
  Radio,
} from "cax-ui";
import { useMeshEditStore } from "@/UI/store/meshEditStore";
import { storeToRefs } from "pinia";
const meshEditStore = useMeshEditStore();
const { sweepModalActive } = storeToRefs(meshEditStore);
const parameterNumber = ref();
const checked = ref(false);
const createTo = ref();
const selectList = [
  {
    label: "路径",
    value: 1,
  },
  {
    label: "位置",
    value: 2,
  },
];
const itemsList = ref(["拉伸二维单元", "拉伸三维单元面"]);

function confirm() {
  sweepModalActive.value = false;
}
function closeBtn() {
  sweepModalActive.value = false;
}
</script>
<style scoped>
.title {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
.chose-box {
  padding: 0 25px;
  margin-bottom: 10px;
}
.radio_item {
  display: inline-block;
  width: 120px;
}

.parameter_number {
  padding: 0 25px;
  display: flex;
  justify-content: flex-start;
  text-align: center;
  height: 30px;
  line-height: 30px;
  margin-bottom: 10px;
}
.parameter_numberinput {
  width: 40%;
}
.parameter_tangent {
  padding-left: 25px;
  margin-bottom: 20px;
}

.createTo-box {
  padding: 0 25px;
  display: flex;
  justify-content: flex-start;
  text-align: center;
}
.createTo-btn {
  margin-left: 10px;
}
.foot-box {
  width: 100%;
  height: 40px;
  text-align: right;
}
.createTo-text {
  margin-left: 10px;

  height: 30px;
  line-height: 30px;
}
.createTo-select {
  width: 40%;
}
.selector-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
.selector-buttons2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 170px;
}
.selector-button {
  height: 32px;
  width: 200px;
  padding: 0 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}

.selector-button.active {
  background-color: #e6f7a7;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  /* flex-grow: 1; */
  font-weight: normal;
}
.icon-button {
  width: 32px;
  padding: 3px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: none;
  background-color: #fff;
}
.imgStyle {
  width: 100%;
  height: 100%;
}
.radio_box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
</style>
